<template>
	<view class="my-world">
		<view class="my-msg">
			<view class="my-empirical">
				<view class="my-empirical">
					<view class="my-empirical-top">
						<view>
							<image :src="avatarUrl" style=""></image>
							<text>{{nickName}}</text>
						</view>
						<view @click="rulePopup">
							成就收益
						</view>
					</view>
					<view class="my-empirical-value">
						<view class="level-characteristic" :style="{'margin-left':mWidth + '%'}">
							<view>
								<image :src="primary_fire" style="width: 24upx;height: 28upx;"></image>
								<text style="display: inline-block;margin-left: 8upx;">{{info.grade}}</text>
							</view>
							<!-- 倒三角 -->
							<view class="arrow-down"></view>
						</view>
						<view class="botline">
							<!-- 底下的进度条 -->
							<view class="topline" :style="{width:width + '%'}"></view> <!-- 里面的显示百分比的进度条 -->
						</view>
						<view class="Percent">
							{{info.achievement_value}}/{{info.next_achievement_value}}
						</view>
					</view>
				</view>
				<view class="my-empirical-value">
					
					
					<view>
						{{info.achievement_value}}/{{info.next_achievement_value}}
					</view>
				</view>
			</view>
			<view class="global-condition">
				<view>
					全球唯一编码：{{info.global_code}}
				</view>
				<view>
					<view class="global-details">
						<text>全球排名</text>
						<text>{{info.national_rank}}</text>
					</view>
					<view class="parting-line"></view>
					<view class="global-details">
						<text>成就值</text>
						<text>{{info.achievement_value}}</text>
					</view>
					<view class="parting-line"></view>
					<view class="global-details">
						<text>成就收益</text>
						<text>{{info.achievement_income}}</text>
					</view>
					<view class="parting-line"></view>
					<view class="global-details">
						<text>点亮城市</text>
						<text>{{info.light_up_province}}</text>
					</view>
				</view>
			</view>
			
			
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper autoplay="true" interval="3000" duration="0" disable-touch="true">
						<swiper-item class="global-condition-inform" v-for="(item,index) in swiperList" :key="index">
							<image :src="message_icon" class="lin_icon"></image>
							<image v-if="item.avatarUrl" :src="item.avatarUrl" style="margin-left: 25upx;"></image>
							<text class="user-name">{{item.nickName|name_val}}</text>
							<text class="inform-msg">已经点亮<text style="color: #FF5C46;">{{item.light_up_province}}座</text>城市，得收益<text style="color: #FF5C46;">{{item.achievement_income}}</text>元</text>
						</swiper-item>
					</swiper>
				</view>
			</view>
			
			
		</view>
        <!--最新一期瓜分-->
        <view class="present-earnings">
        	<view class="present-earnings-data">
        		<view>
        			第{{currentInfo.period}}期({{currentInfo.endTime}})成就收益瓜分
        		</view>
        		<view v-show="showTime">
        			<text style="padding-left: 12upx;padding-right: 10upx;">{{d}}</text>天
        			<text>{{h}}</text>时
        			<text>{{f}}</text>分
        			<text>{{s}}</text>秒
        		</view>
        	</view>
        	<view class="achievement-team">
        		<view>
        			<text class="achievement-team-title">当前成就值</text>
        			<text class="achievement-team-value">{{currentInfo.achievement_value}}</text>
        		</view>
        		<view>
        			<text class="achievement-team-title">我的团队(人)</text>
        			<text class="achievement-team-value">{{currentInfo.myTeamNum}}</text>
        		</view>
        	</view>
        	<view class="achievement-team-earnings">
        		<view class="this-time-earnings">
        			<view @click="theTimeEarning()">
        				<text class="achievement-team-title">本次预计收益(元)</text>
        				<text class="achievement-team-tip">?</text>
        			</view>
        			<text class="achievement-team-value this-time">{{currentInfo.userBenefits}}</text>
        			<view class="this-time-explain" v-if="thisTimeShow">
        				<view>
        					<view>
        						成就值占比越大，获得收益越大
        					</view>
        					<view style="font-size: 24upx;margin-top: 10upx;">
        						预计收益=(本人成就值/所有成就值)*瓜分金额
        					</view>
                            
        				</view>
                        
        				<view></view>
        			</view>
        		</view>
        		<view class="this-header-earnings">
        			<view @click="theTeamEarning()">
        				<text class="achievement-team-title">本次预计队长收益(元)</text>
        				<text class="achievement-team-tip">?</text>
        			</view>
        			<text class="achievement-team-value this-time">{{currentInfo.captainIncome}}</text>
        			<view class="this-time-explain this-money-explain" v-if="thisTeamShow">
        				<view>
        					<view>
        						招募<text style="color: #FF5C46;">{{inviteNum}}名</text>队员，享受队长收益，招募越多，收益越大
        					</view>
        					<view style="font-size: 24upx;margin-top: 10upx;">
        						预计收益=(本人招募人员/所有人员)*瓜分金额
        					</view>
        				</view>
        				<view></view>
        			</view>
        		</view>
                
        	</view>
            <view style="color: #00A66A;font-size:22upx ;" class="thistitle">可直接提现到<text style="color:#FF5C46;" @click="WeChatwithdrawal">微信零钱</text></view>
					<!-- #ifdef MP-WEIXIN -->
        	<button open-type="share" class="recruit-member">
        		立即招募5名开启队长收益
        	</button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
        	<button @click="open_share_tip" class="recruit-member">
        		立即招募5名开启队长收益
        	</button>
					<!-- #endif -->
        	<view>
        		招募<text style="color: #FF5C46;">5</text>位<text  style="color: #FF5C46;">1</text>级队员开启队长收益，队员越多，成就值越大，收益越高
        	</view>
        </view>
		<view class="world-city" style="{height: 1022upx;}">
			<view class="world-china">
				<view></view>
				<view class="my-world-china">
					<view class="my-world-map-text">
						<image :src="map_icon"></image>
						<text>中国</text>
					</view>
					<view style="padding-left: 20rpx;box-sizing: border-box;" v-show="mapSee">
						<!--#ifdef MP-ALIPAY -->
						<canvas canvas-id="canvasMap" id="canvasMap" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
						 :style="{'width':cWidth+'px','height':cHeight+'px'}" @click="touchMap"></canvas>
						<!--#endif-->
						<!--#ifndef MP-ALIPAY -->
						<canvas canvas-id="canvasMap" id="canvasMap" class="charts" @click="touchMap"></canvas>
						<!--#endif-->
					</view>
				</view>
				<view></view>
			</view>
			<view class="lighten-city" v-if="info.light_up_num>0">
				获得<text style="color: #FF5C46;">{{info.light_up_num}}次</text>点亮机会，请选择需要点亮城市
			</view>
			<view class="next_light" v-else>
				您还差<text style="color:#FF5C46;margin-left: 8upx;">{{info.city_achievement_value}}</text>成就值点亮下一座城市
			</view>
			<view class="world-china-city" :style="'height:'+cityHeight+'px'">
				<text :class="lightIndex==index||realCity.indexOf(item)!=-1?'light_color':''" v-for="(item,index) in cityList" :key="index" @click="lightCity(item,index)">{{item|city_val}}</text>
			</view>
			<view class="open-city" @click="openAnotherCity" v-if="!cityShow">
				<text>展开其他城市</text>
				<image :src="arror_down_icon"></image>
			</view>
			<view class="open-city" @click="mergeCity" v-else>
				<text>合并城市</text>
				<image :src="arror_down_icon"></image>
			</view>
		</view>
		<!--<view class="present-earnings">
			<view class="present-earnings-data">
				<view>
					第{{currentInfo.period}}期({{currentInfo.endTime}})成就收益瓜分
				</view>
				<view v-show="showTime">
					<text style="padding-left: 12upx;padding-right: 10upx;">{{d}}</text>天
					<text>{{h}}</text>时
					<text>{{f}}</text>分
					<text>{{s}}</text>秒
				</view>
			</view>
			<view class="achievement-team">
				<view>
					<text class="achievement-team-title">当前成就值</text>
					<text class="achievement-team-value">{{currentInfo.achievement_value}}</text>
				</view>
				<view>
					<text class="achievement-team-title">我的团队(人)</text>
					<text class="achievement-team-value">{{currentInfo.myTeamNum}}</text>
				</view>
			</view>
			<view class="achievement-team-earnings">
				<view class="this-time-earnings">
					<view @click="theTimeEarning()">
						<text class="achievement-team-title">本次预计收益(元)</text>
						<text class="achievement-team-tip">?</text>
					</view>
					<text class="achievement-team-value this-time">{{currentInfo.userBenefits}}</text>
					<view class="this-time-explain" v-if="thisTimeShow">
						<view>
							<view>
								成就值占比越大，获得收益越大
							</view>
							<view style="font-size: 24upx;margin-top: 10upx;">
								预计收益=(本人成就值/所有成就值)*瓜分金额
							</view>
						</view>
						<view></view>
					</view>
				</view>
				<view class="this-header-earnings">
					<view @click="theTeamEarning()">
						<text class="achievement-team-title">本次预计队长收益(元)</text>
						<text class="achievement-team-tip">?</text>
					</view>
					<text class="achievement-team-value this-time">{{currentInfo.captainIncome}}</text>
					<view class="this-time-explain this-money-explain" v-if="thisTeamShow">
						<view>
							<view>
								招募<text style="color: #FF5C46;">{{inviteNum}}名</text>队员，享受队长收益，招募越多，收益越大
							</view>
							<view style="font-size: 24upx;margin-top: 10upx;">
								预计收益=(本人招募人员/所有人员)*瓜分金额
							</view>
						</view>
						<view></view>
					</view>
				</view>
			</view>
			<button open-type="share" class="recruit-member">
				招募队员快速提高收益
			</button>
			<view>
				每招募<text style="color: #FF5C46;">1</text>个队员，获得1000点成就值，邀请<text style="color: #FF5C46;">{{inviteNum}}位</text>升级队长收益
			</view>
		</view>-->
		<view class="before-earnings">
			<view class="before-earnings-title">
				往期瓜分收益
			</view>
			<scroll-view v-if="oldList.length>=10" scroll-y="true" :style="'height:1100px'" @scrolltolower="loadingMore">
				<view class="before-earnings-mag" v-for="(item,index) in oldList" :key="index">
					<view class="before-earnings-data">
						<view>第{{item.period}}期({{item.end_time}})瓜分收益</view>
						<view></view>
					</view>
					<view class="before-earnings-case">
						<!-- <view class="carve-money">
							<text>瓜分金额</text>
							<text>{{item.amount}}</text>
						</view>
						<view class="division-line"></view> -->
						<view class="the-time">
							<text>本次成就收益(元)</text>
							<text>{{item.achievement_value}}</text>
						</view>
						<view class="division-line"></view>
						<view class="header-earnings">
							<text>本次队长收益(元)</text>
							<text>{{item.captain_income}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view v-else class="before-earnings-mag" v-for="(item,index) in oldList" :key="index">
				<view class="before-earnings-data">
					<view>第{{item.period}}期({{item.end_time}})瓜分收益</view>
					<view></view>
				</view>
				<view class="before-earnings-case">
				<!-- 	<view class="carve-money">
						<text>瓜分金额</text>
						<text>{{item.amount}}</text>
					</view>
					<view class="division-line"></view> -->
					<view class="the-time">
						<text>本次成就收益(元)</text>
						<text>{{item.achievement_value}}</text>
					</view>
					<view class="division-line"></view>
					<view class="header-earnings">
						<text>本次队长收益(元)</text>
						<text>{{item.captain_income}}</text>
					</view>
				</view>
			</view>
		</view>
		<ending v-if="page>last_page||page==1"></ending>
		<!-- 点亮规则弹框 -->
		<uni-popup ref='popupRule' :custom="true" :maskClick="false">
			<view class="popup_rule_de">
				<image @click="closeRule" :src="close_popup" style="width: 52upx;height: 52upx;position: absolute;top: 0;right: 0;"></image>
				<view class="popup_rule_contain">
					<view class="popup_rule_title">
						<view class="line" style="margin-right: 20upx;"></view>
						<view>点亮规则</view>
						<view class="line" style="margin-left: 20upx;"></view>
					</view>
					<scroll-view scroll-y="true" class="popDetail">
						<u-parse :content="lightRule"></u-parse>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
		
		<!-- #ifdef H5 -->
		<!-- 分享提示 -->
		<uni-popup ref="shareTip" :custom="true">
			<view class="popup_box_de_share"><image class="popup_box_close_share" src="/static/share_tip.png"></image></view>
		</uni-popup>
		<!-- #endif -->
	</view>
</template>

<script>
	import uParse from '@/components/un-parse/u-parse.vue'
	import {formaSyTime} from '@/common/util.js'
	import ending from '../../common/ending.vue'
	import uniPopup from '../../components/uni-popup/uni-popup.vue'
	import uCharts from '@/components/u-charts/u-charts.js';
	import {
		isJSON
	} from '@/common/checker.js';
	var _self;
	var canvaMap = null;
	export default {
		//分享
		onShareAppMessage(res) {
			return {
				title: this.currentInfo.config.copy_write,
				path: 'pages/home/home?share_id='+this.$store.getters.getUserId+'&fromJin=2',
				imageUrl: this.currentInfo.config.image_src
			}
		},
		components: {
			ending,
			uniPopup,
			uParse
		},
		data() {
			return {
				inviteNum: this.$store.getters.getNum,
				mapSee: true,
				lightIndex: -1,
				token: this.$store.getters.getToken,
				nickName: '',
				avatarUrl: '',
				primary_fire: this.$imgUrl + 'img/primary_fire.png',
				message_icon: this.$imgUrl + 'img/message-icon@2x.png',
				map_icon: this.$imgUrl + 'img/map-icon.png',
				arror_down_icon: this.$imgUrl + 'img/arror_down_icon.png',
				close_popup: this.$imgUrl + 'img/riddle/close_popup.png',
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				width: 0,
				mWidth: 0,
				cityList: [],
				cityShow: false,
				cityHeight: '',
				thisTimeShow: false,
				thisTeamShow: false,
				fullCityName: [],
				info: {
					achievement_income: '',
					achievement_value: '',
					grade: '',
					light_up_province: '',
					national_rank: '',
					next_achievement_value: '',
					light_up_num: '',
					city_achievement_value: '',
					global_code: ''
				},
				// 用户真的点亮的城市
				realCity: [],
				lightRule: '',
				page: 1,
				last_page: 1,
				currentInfo: {
					achievement_value: 0,
					captainIncome: 0,
					endTime: 0,
					myTeamNum: 0,
					period: 0,
					// time: 0,
					userBenefits: 0,
					config: {
						copy_write: '',
						image_src: ''
					}
				},
				oldList: [],
				d: '00',
				h: '00',
				f: '00',
				s: '00',
				timeId: null,
				showTime: false,
				swiperList:[],
				animate: false,
				timeId2: null
			}
		},
		filters: {
			city_val(value) {
				if (!value) return ''
				if(value == '内蒙古自治区'||value == '黑龙江省') {
					return value.slice(0, 3)
				}else if (value.length > 2) {
					return value.slice(0, 2)
				}
				return value
			},
			name_val(value) {
				if (!value) return ''
				if (value.length > 3) {
					return value.slice(0, 3)
				}
				return value
			}
		},
		onLoad() {
			try {
				const res = uni.getStorageSync('userInfo');
				if (res) {
					this.nickName = res.nickName
					this.avatarUrl = res.avatarUrl
				}
			} catch (e) {
				this.nickName = this.$store.state.nickName
				this.avatarUrl = this.$store.state.avatarUrl
			}
			// 绘制地图开始
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(582);
			this.cHeight = uni.upx2px(620);
			this.getLightCitys()
			// 绘制地图结束
			this.getSetInfo()
		},
		onShow() {
			this.getInComeList()
			this.getSwipers()
		},
		onUnload() {
			if (this.timeId != null) {
				clearInterval(this.timeId)
				this.timeId = null
			}
			if (this.timeId2 != null) {
				clearInterval(this.timeId2)
				this.timeId2 = null
			}
		},
		methods: {
			// startSwiper() {
			// 	let timeId2 = setInterval(()=>{
			// 		this.showMarquee()
			// 	},1500)
			// },
			// showMarquee() {
			// 	this.animate = true;
			// 	setTimeout(() => {
			// 		this.swiperList.push(this.swiperList[0]);
			// 		this.swiperList.shift();
			// 		this.animate = false;
			// 	}, 500);
			// },
            //跳转微信提现
            WeChatwithdrawal () {
                uni.navigateTo({
                	url: '../memberCenter/depositWeiXin/depositWeiXin'
                })
            },
			getSwipers() {
				this.$api.getIncomeList({token:this.token}).then(res =>{
					if(res.status) {
						this.swiperList=res.data
						// this.startSwiper()
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					console.log('获取用户收益轮播数据',res)
				}).catch(err=>{
					console.log('获取用户收益轮播数据',err)
				})
			},
			getTime(time) {
				this.timeId=setInterval(()=>{
					var now = new Date().getTime();
					var distance = time*1000-now
					if(distance>0&&distance<(72*60*60*1000)) {//小于72小时显示
						var days = Math.floor(distance / (1000 * 60 * 60 * 24));
						var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
						var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
						var seconds = Math.floor((distance % (1000 * 60)) / 1000);
						this.d = days>=10?days:'0'+days;
						this.h = hours>=10?hours:'0'+hours;
						this.f = minutes>=10?minutes:'0'+minutes;
						this.s = seconds>=10?seconds:'0'+seconds;
						this.showTime = true
					}else {
						this.d = '00'
						this.h = '00'
						this.f = '00'
						this.s = '00'
						if(this.timeId!=null) {
							clearInterval(this.timeId)
							this.timeId=null
						}
						this.showTime = false
					}
				},1000)
			},
			// 获取收益记录
			getInComeList() {
				this.page = 1
				let data = {
					token: this.token,
					page: this.page
				}
				this.$api.get_income_record(data).then(res=>{
					if(res.status) {
						this.currentInfo = res.info
						this.getTime(res.info.time)
						this.currentInfo.endTime = formaSyTime(this.currentInfo.time)
						this.oldList = res.data.data
						for(let i=0;i<this.oldList.length;i++) {
							this.oldList[i].end_time = formaSyTime(this.oldList[i].end_time)
						}
						this.last_page = res.data.last_page
						
						// H5分享
						let link=this.$store.state.H5URL+'pages/home/home?share_id='+this.$store.getters.getUserId+'&fromJin=2'
						let share_detail = '这是我的成就页面-招募分享详情'
						this.share(this.currentInfo.config.copy_write,share_detail,this.currentInfo.config.image_src,link=link)
					}
					console.log('获取收益记录',res)
				}).catch(err=>{
					console.log('获取收益记录',err)
				})
			},
			loadingMore() {
				this.page=this.page+1
				if(this.page>this.last_page) {
					uni.showToast({
						title: '没有更多了！',
						icon: 'none',
						duration: 2000
					})
					return false
				}else {
					let data = {
						token: this.token,
						page: this.page
					}
					this.$api.get_income_record(data).then(res=>{
						if(res.status) {
							for(let i=0;i<res.data.data.length;i++) {
								res.data.data[i].end_time = formaSyTime(res.data.data[i].end_time)
							}
							this.oldList = this.oldList.concat(res.data.data)
							this.last_page = res.data.last_page
						}
						console.log('获取收益记录',res)
					}).catch(err=>{
						console.log('获取收益记录',err)
					})
				}
			},
			// 获取点亮规则
			getSetInfo() {
				this.$api.get_set_info({}).then(res => {
					if(res.status) {
						this.lightRule = res.data.lightRule
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					console.log('获取点亮规则',res)
				}).catch(err => {
					console.log('获取点亮规则',err)
				})
			},
			getLightCitys() {
				let data = {
					token: this.token
				}
				this.$api.getLightUpProvince(data).then(res => {
					if(res.status) {
						this.info = res.info
						this.width = (this.info.achievement_value/this.info.next_achievement_value).toFixed(2)*100
						this.width>100?this.width = 100:this.width=this.width
						if (this.width >= 92) {
							this.mWidth = 79
						} else {
							this.mWidth = this.width - 13<0?0:this.width - 13
						}
						this.realCity = res.data.name
						this.getMapData()
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					console.log('获取用户点亮省份',res)
				}).catch(err => {
					console.log('获取用户点亮省份',err)
				})
			},
			getMapData() {
				let data = {
					token: this.token
				}
				this.$api.getMapData(data).then(res => {
					console.log('拿到的地图的数据',res)
					if (res.status) {
						this.fullCityName = []
						this.cityList = []
						let cMap = {
							series: []
						};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						cMap.series = res.data.features;
						for (let i = 0; i < cMap.series.length; i++) {
							if(this.realCity.indexOf(cMap.series[i].properties.name)!=-1) {
								cMap.series[i].color = '#049a1e'
							}else {
								cMap.series[i].color = '#F9F9F9'
							}
							this.fullCityName.push(cMap.series[i].properties.name)
							cMap.series[i].properties.nickName = cMap.series[i].properties.name
							cMap.series[i].properties.name = ""
						}
						_self.showMap("canvasMap", cMap);
						this.cityList = this.fullCityName.slice(0, 12)
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}).catch(err => {
					console.log('获取地图数据', err)
				})
			},
			showMap(canvasMap, chartData) {
				canvaMap = new uCharts({
					$this: _self,
					canvasId: canvasMap,
					type: 'map',
					fontSize: 11,
					padding: [0, 0, 0, 0],
					legend: {
						show: false
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						map: {
							border: true,
							borderWidth: 1,
							borderColor: '#d0e4dd',
							fillOpacity: 0.6
						}
					}
				});
			},
			// 点亮城市
			lightCity(item,index) {
				let self = this
				if(self.realCity.indexOf(item)!=-1) {
					uni.showToast({
						title: '您已经点亮该城市！',
						icon: 'none',
						duration: 2000
					})
					return false
				}else {
					self.lightIndex = index
					self.cityList[index]
					uni.showModal({
						content: '确定点亮'+self.cityList[index]+'？',
						confirmColor: '#00A66A',
						success: function (res) {
						    if (res.confirm) {
								self.sureLight()
						    } else if (res.cancel) {
								self.lightIndex = -1
						    }
						}
					})
				}
			},
			cancelLight() {
				this.lightIndex = -1
			},
			// 确定点亮省份
			sureLight() {
				let lightCityName = this.cityList[this.lightIndex]
				let id = this.lightIndex+1
				let data = {
					token: this.token,
					id: id,
					name: lightCityName
				}
				this.$api.addMap(data).then(res => {
					if (res.status) {
						this.mergeCity()
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
						setTimeout(()=>{
							this.getLightCitys()
						},1000) 
					}else {
						this.lightIndex = -1
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}).catch(err => {
					console.log('点亮省份',err)
				})
			},
			touchMap(e) {
				uni.showToast({
					title: '请点击下方城市',
					icon: 'none',
					duration: 1500
				})
			},
			rulePopup() {
				this.$refs.popupRule.open()
				this.mapSee = false
			},
			closeRule() {
				this.$refs.popupRule.close()
				this.mapSee = true
			},
			openAnotherCity() {
				this.cityShow = true
				this.cityHeight = 240
				this.cityList = this.fullCityName
			},
			mergeCity() {
				this.cityShow = false
				this.cityHeight = 88
				this.cityList = this.fullCityName.slice(0, 12)
			},
			theTimeEarning() {
				this.thisTimeShow = !this.thisTimeShow
				this.thisTeamShow = false
			},
			theTeamEarning() {
				this.thisTeamShow = !this.thisTeamShow
				this.thisTimeShow = false
			},
			// H5分享
			open_share_tip() {
				this.$refs.shareTip.open();
			},
		}
	}
</script>

<style>
	@keyframes plum {
		0%,100% {
		transform:rotate(-15deg);
	}
	20% {
		transform:rotate(15deg);
	}
	30% {
		transform:rotate(20deg);
	}
	40% {
		transform:rotate(25deg);
	}
	50% {
		transform:rotate(30deg);
	}
	60% {
		transform:rotate(20deg);
	}
	70% {
		transform:rotate(0deg);
	}
	80% {
		transform:rotate(-10deg);
	}
	90% {
		transform:rotate(-20deg);
	}
	}
		.lin_icon {
			animation: plum 1.5s infinite linear;
			transform-origin: center top;
			width: 48upx;
			height: 48upx;
			margin-left: 15rpx;
		}

	.hi_top {
		transition: all 0.5s;
		margin-top: -30upx;
	}
	.light_color {
		color: #00A66A !important;
	}

	.charts {
		height: 620upx;
		width: 582upx;
		background-color: #FFFFFF;
	}

	.next_light {
		color: #999999;
		font-size: 28upx;
		text-align: center;
		margin-top: 42upx;
	}

	/* 本次收益说明 */
	.this-time-earnings {
		position: relative;
	}
     .thistitle{
       display: flex;
       justify-content: center;
       justify-items: center;
			 margin-top: 30upx;
       
      

    }
	.this-header-earnings {
		position: relative;
	}

	.this-time-explain {
		width: 524upx;
		height: 140upx;
		position: absolute;
		top: -155upx;
		left: -32upx;
	}
	.this-money-explain {
		width: 680upx;
		height: 140upx;
		position: absolute;
		top: -155upx;
		left: -355upx;
	}

	.this-team-explain {
		width: 580upx;
		height: 140upx;
		position: absolute;
		top: -155upx;
		right: -23upx;
	}

	.this-time-explain>view:first-child,
	.this-team-explain>view:first-child {
		width: 100%;
		height: 120upx;
		background: rgba(0, 0, 0, 0.7);
		border-radius: 10upx;
		padding-top: 20upx;
		color: rgba(255, 255, 255, 0.8);
		font-size: 28upx;
		box-sizing: border-box;
		text-align: center;
		position: relative;
	}

	.this-team-explain>view:last-child {
		width: 0;
		height: 0;
		border-width: 17upx;
		border-style: solid;
		border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;
		position: absolute;
		bottom: -10upx;
		right: 20upx;
	}

	.this-time-explain>view:last-child {
		width: 0;
		height: 0;
		border-width: 17upx;
		border-style: solid;
		border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;
		position: absolute;
		bottom: -10upx;
		left: 50%;
		transform: translate(-50%, 0);
	}
	.this-money-explain>view:last-child {
		left: 93%;
	}

	/* 点亮规则弹框样式 */
	.popup_rule_de {
		width: 590upx;
		height: 820upx;
		position: relative;
	}

	.popup_rule_contain {
		position: absolute;
		top: 72upx;
		left: 0;
		width: 100%;
		height: 748upx;
		background: #FFFFFF;
		border-radius: 16upx;
	}

	.popup_rule_title {
		width: 100%;
		height: 128upx;
		background: linear-gradient(to right, #9CCC00, #02B861);
		border-top-left-radius: 16upx;
		border-top-right-radius: 16upx;
		color: #FFFFFF;
		display: flex;
		font-size: 34upx;
		padding-left: 128upx;
		padding-right: 126upx;
		padding-top: 40upx;
		box-sizing: border-box;
	}
	.popDetail {
		width: 100%;
		height: 620upx;
		padding: 20upx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.line {
		width: 80upx;
		height: 2upx;
		background: #FFFFFF;
		margin-top: 22upx;
	}

	page {
		position: relative;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.my-world {
		width: 100%;
		height: 100%;
		background: #F5F5F5;
	}

	.my-msg {
		width: 100%;
		height: 612upx;
		background: #FFFFFF;
		position: relative;
	}
	
	.my-empirical {
		width: 100%;
		height: 332upx;
		background: url(https://lightplanet.tuanhaoke.cn/img/my_wprld_bg.png);
		background-size: 100% 100%;
	}
	
	.my-empirical-top {
		display: flex;
		justify-content: space-between;
		padding-left: 30upx;
		padding-top: 30upx;
		box-sizing: border-box;
	}
	
	.my-empirical-top>view>image {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		vertical-align: middle;
	}
	
	.my-empirical-top>view>text {
		display: inline-block;
		vertical-align: middle;
		color: #FFFFFF;
		margin-left: 20upx;
		font-size: 30upx;
	}
	
	.my-empirical-top>view:last-child {
		width: 144upx;
		height: 54upx;
		border-top-left-radius: 26upx;
		border-bottom-left-radius: 26upx;
		background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.23));
		color: #FFFFFF;
		font-size: 24upx;
		text-align: center;
		line-height: 54upx;
		margin-top: 14upx;
	}
	
	.my-empirical-value {
		width: 100%;
		height: 120px;
		margin-top: 8upx;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	
	.my-empirical-value .level-characteristic>view:first-child {
		width: 172upx;
		height: 40upx;
		line-height: 40upx;
		color: #00A66A;
		font-size: 24upx;
		background: #FFFFFF;
		border-radius: 48upx;
		padding-left: 18upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	
	/* 倒三角 */
	.my-empirical-value .level-characteristic>view:last-child {
		width: 0;
		height: 0;
		border-width: 12upx;
		border-style: solid;
		border-color: #FFFFFF transparent transparent transparent;
		margin-left: 75upx;
	}
	
	.botline {
		width: 690upx;
		height: 16upx;
		border-radius: 20upx;
		background: #000000;
		opacity: 0.26;
	}
	
	.topline {
		background: linear-gradient(to right, #3CD500, #C7FF20);
		border-radius: 20upx;
		height: 16upx;
	}
	
	.my-empirical-value>view:last-child {
		margin-top: 10upx;
		text-align: right;
		color: #FFFFFF;
		font-size: 24upx;
	}
	
	.global-condition {
		width: 690upx;
		height: 200upx;
		background: #FFFFFF;
		position: absolute;
		left: 30upx;
		bottom: 150upx;
		z-index: 999;
		border-radius: 20upx;
		box-shadow: 0 12upx 16upx 0 rgba(161, 160, 159, 0.2);
	}
	
	.global-condition>view:first-child {
		font-size: 24upx;
		color: #666666;
		line-height: 34upx;
		padding-top: 20upx;
		padding-left: 30upx;
		box-sizing: border-box;
	}
	
	.global-condition>view:last-child {
		display: flex;
		justify-content: space-between;
		margin-top: 30upx;
	}
	
	.global-condition>view:last-child{
		padding: 0 30upx;
		box-sizing: border-box;
	}
	
	.global-condition>view:last-child .parting-line {
		height: 46upx;
		width: 2upx;
		border-left: 1px solid #EFEFEF;
		margin-top: 16upx;
	}
	
	.global-condition>view:last-child text {
		display: block;
		text-align: center;
	}
	
	.global-condition>view:last-child text:first-child {
		color: #999999;
		font-size: 24upx;
	}
	
	.global-condition>view:last-child text:last-child {
		font-size: 34upx;
		color: #FF5C46;
		font-weight: 550;
	}

	.global-condition-inform>image {
		width: 48upx;
		height: 48upx;
		border-radius: 50%;
		vertical-align: middle;
	}
	
	.global-condition-inform .user-name {
		display: inline-block;
		color: #666666;
		font-size: 24upx;
		line-height: 34upx;
		vertical-align: middle;
		margin-left: 20upx;
		margin-right: 6upx;
	}
	
	.global-condition-inform .inform-msg {
		font-size: 24upx;
		color: #666666;
		vertical-align: middle;
		line-height: 34upx;
	}
	
	.world-city {
		width: 100%;
		background: #FFFFFF;
		margin-top: 20upx;
		padding-top: 60upx;
		box-sizing: border-box;
	}
	
	.world-china {
		display: flex;
		justify-content: space-between;
	}
	
	.world-china>view:first-child {
		width: 34upx;
		height: 720upx;
		border-top-right-radius: 16upx;
		border-bottom-right-radius: 16upx;
		box-shadow: 0 0 20upx 0 rgba(164, 164, 164, 0.5);
	}
	

	.world-china>view:last-child {
		width: 34upx;
		height: 720upx;
		border-top-left-radius: 16upx;
		border-bottom-left-radius: 16upx;
		box-shadow: 0 0 20upx 0 rgba(164, 164, 164, 0.5);
	}

	.world-china .my-world-china {
		width: 622upx;
		height: 720upx;
		background: #FFFFFF;
		border-radius: 16upx;
		box-shadow: 0 4upx 26upx 0 rgba(184, 184, 184, 0.5);
	}

	.my-world-map-text {
		display: flex;
		padding: 20upx;
		box-sizing: border-box;
	}

	.my-world-map-text>image {
		width: 56upx;
		height: 56upx;
		vertical-align: middle;
	}

	.my-world-map-text>text {
		display: inline-block;
		font-size: 34upx;
		color: #333333;
		text-align: center;
		vertical-align: middle;
		line-height: 50upx;
		margin-left: 202upx;
		font-weight: 550;
	}

	.lighten-city {
		text-align: center;
		color: rgba(0, 166, 106, 0.8);
		font-size: 28upx;
		margin-top: 42upx;
	}

	.world-china-city {
		width: 696upx;
		height: 176upx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 auto;
		margin-top: 48upx;
		border-bottom: 1upx solid #DEDEDE;
	}

	.world-china-city>text {
		display: inline-block;
		width: 110upx;
		height: 56upx;
		background: #F2F2F2;
		border-radius: 28upx;
		line-height: 56upx;
		text-align: center;
		color: #666666;
		font-size: 28upx;
	}

	.open-city {
		text-align: center;
		color: #999999;
		font-size: 24upx;
		padding-bottom: 16upx;
		box-sizing: border-box;
		margin-top: 16upx;
	}

	.open-city>text {
		vertical-align: middle;
	}

	.open-city>image {
		width: 20upx;
		height: 12upx;
		vertical-align: middle;
		margin-left: 10upx;
	}

	.present-earnings {
		width: 100%;
		height: 694upx;
		background: #FFFFFF;
		margin-top: 20upx;
		padding: 0 30upx;
		box-sizing: border-box;
	}

	.present-earnings-data {
		width: 100%;
		height: 142upx;
		padding: 30upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
	}

	.present-earnings-data>view:first-child {
		text-align: center;
		color: #333333;
		font-size: 32upx;
		line-height: 44upx;
	}

	.present-earnings-data>view:last-child {
		text-align: center;
		color: #FF5C46;
		font-size: 20upx;
		margin-top: 20upx;
	}

	.present-earnings-data>view>text {
		display: inline-block;
		padding-left: 6upx;
		padding-right: 4upx;
		box-sizing: border-box;
		line-height: 28upx;
		background: #FFE3E3;
		border-radius: 2upx;
		margin: 0 10upx;
	}

	.achievement-team {
		margin-top: 40upx;
		display: flex;
		padding-left: 30upx;
		padding-right: 30upx;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.achievement-team>view{
		width: 290upx;
	}

	.achievement-team>view>text {
		display: block;
	}

	.achievement-team-title {
		color: #666666;
		font-size: 26upx;
	}

	.achievement-team-value {
		color: #FF5C46;
		font-size: 44upx;
		margin-top: 10upx;
		font-weight: 550;
	}

	.this-time {
		display: inline-block;
	}

	.achievement-team-earnings {
		margin-top: 42upx;
		display: flex;
		padding-left: 30upx;
		padding-right: 30upx;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.achievement-team-tip {
		display: inline-block;
		width: 28upx;
		height: 28upx;
		border-radius: 50%;
		text-align: center;
		line-height: 28upx;
		background: #DEDEDE;
		margin-left: 14upx;
	}

	.recruit-member {
		width: 640upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		color: #FFFFFF;
		background: linear-gradient(#CBEC00, #00A66A);
		border-radius: 44upx;
		margin: 0 auto;
		margin-top: 25upx;
		box-shadow: 0 8upx 16upx 0 rgba(0, 166, 106, 0.4);
		font-size: 36upx;
	}

	.present-earnings>view:last-child {
		color: rgba(0, 166, 106, 0.8);
		text-align: center;
		font-size: 22upx;
		margin-top: 20upx;
		line-height: 34upx;
	}

	.before-earnings {
		width: 1005;
		padding: 0 30upx;
		padding-bottom: 40upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 20upx;
	}

	.before-earnings-title {
		text-align: center;
		padding: 28upx 0;
		box-sizing: border-box;
		color: #333333;
		font-size: 32upx;
		line-height: 44upx;
		border-bottom: 1upx solid #DEDEDE;
		font-weight: 550;
	}

	.before-earnings-mag {
		margin-top: 40upx;
	}

	.before-earnings-data {
		height: 64upx;
		position: relative;
	}

	.before-earnings-mag .before-earnings-data>view:first-child {
		width: 100%;
		height: 64upx;
		background: linear-gradient(to right, #4CCB31, #00B574);
		color: #FFFFFF;
		text-align: center;
		line-height: 64upx;
		font-size: 28upx;
		border-top-left-radius: 10upx;
		border-top-right-radius: 10upx;
	}

	.before-earnings-mag .before-earnings-data>view:last-child {
		width: 0;
		height: 0;
		border-width: 17upx;
		border-style: solid;
		border-color: #4CCB31 transparent transparent transparent;
		position: absolute;
		bottom: -32upx;
		left: 50%;
		transform: translate(-50%, 0);
		z-index: 999;
	}

	.before-earnings-case {
		width: 100%;
		background: #F8F8F8;
		display: flex;
		justify-content: space-between;
		padding: 40upx 20upx 28upx 20upx;
		box-sizing: border-box;
	}

	.division-line {
		height: 46upx;
		width: 2upx;
		background: #E4E4E4;
		margin-top: 18upx;
		margin-right: 24upx;
	}

	.carve-money {
		width: 220upx;
	}

	.the-time {
		width: 248upx;
	}

	.header-earnings {
		width: 220upx;
	}

	.before-earnings-case text {
		display: block;
		text-align: center;
	}

	.carve-money>text:first-child,
	.the-time>text:first-child,
	.header-earnings>text:first-child {
		color: #999999;
		font-size: 24upx;
		line-height: 34upx;
	}

	.carve-money>text:last-child,
	.the-time>text:last-child,
	.header-earnings>text:last-child {
		color: #333333;
		font-size: 36upx;
		line-height: 50upx;
		margin-top: 4upx;
	}

	.popup_box_des {
		width: 640upx;
		height: 240upx;
		border-radius: 24upx;
		background-color: #fff;
		font-size: 34upx;
	}

	.popup_top_des {
		width: 100%;
		height: 160upx;
		box-sizing: border-box;
		padding: 54upx 0upx;
		border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
	}

	.popup_title_des {
		color: #353535;
		text-align: center;
	}

	.checkDeBtnss {
		height: 80upx;
		display: flex;
		color: #666;
	}

	.sureDeBtns {
		width: 50%;
		height: 100%;
		color: #00A66A;
		text-align: center;
		line-height: 80upx;
	}

	.cancleDeBtns {
		width: 50%;
		height: 100%;
		text-align: center;
		line-height: 80upx;
		border-right: 1upx solid rgba(0, 0, 0, 0.1);
	}
	
		.page-section{
			margin-top: 200upx;
			z-index: 100;
			}
			
			.page-section{
				background: #007AFF;
				width:90%;
				height: 60rpx;
				margin-left: 5%;
				background: #eee;
				border-radius: 30rpx;
			}
			.page-section-spacing{
				margin-left: 15rpx;
			}


    /*最新一期瓜分*/
    .latest .solid{
        border-bottom: 2upx solid #DEDEDE;
        margin-top: 22upx;
        width: 720upx;
        margin-left: 17upx;
        
    }
    .latest .Incomedivide{
        height: 44upx;
        font-size: 32upx;
        display: flex;
        justify-content: center;
        justify-items: center;
        color: #333333;
        font-weight: 800;
        margin-top: 18upx;
    }
     .latest .countdown{
         color:#FF5C46;
         display: flex;
         justify-content: center;
         justify-items: center;
         font-size: 20upx;
        
     }
      .latest .earnings{
         display: flex;
         width: 100%;
         justify-content: space-between;
         padding:40upx 50upx 0 60upx;
         box-sizing: border-box;
         flex-wrap: wrap;
         
         
      }
      .latest .earnings .col{
          width: 50%;
          
      }
       .latest .Say-hello-to{
           width: 28upx;
           height: 28upx;
           border-radius: 50%;
           background-color: #DEDEDE;
           margin-left: 25upx;
           padding-left: 8upx;
           box-sizing: border-box;
           display: inline-block;
       }
       .latest .withdrawal{
           color: #00A66A;
           display: flex;
           justify-content: center;
           justify-items: center;
           font-size: 24upx;
       }
      /* 分享提示 */
      .popup_box_de_share{
      	width: 100%;
      	height: 100%;
      }
      .popup_box_close_share{
      	width: 300upx;
      	height: 300upx;
      	position: fixed;
      	top: 10upx;right: 10upx;
      }
      .popup_box_title{
      	display: flex;
      	justify-content: space-between;
      }
      .popup_box_title>view:nth-child(2){
      	color: #333333;
      	font-size: 34upx;
      }
      .popup_box_title_tip{
      	color: #999999;
      	font-size: 24upx;
      	text-align: center;
      	margin-top: 10upx;
      }
      .popup_box_tip{
      	color: #666666;
      	font-size: 26upx;
      	text-align: center;
      }
      .popup_box_title>.line{
      	width: 84upx;
      	height: 2upx;
      	border-top: 1upx solid #DEDEDE;
      	margin-top: 24upx;
      }
      .popup_box_de{
      	width: 592upx;
      	height: 744upx;
      	position: relative;
      	z-index: 999;
      }
      .popup_box_close{
      	width: 52upx;
      	height: 52upx;
      	position: absolute;
      	top: 0;
      	right: 0;
      }
      .popup_box_content{
      	width: 100%;
      	height: 682upx;
      	background: #FFFFFF;
      	position: absolute;
      	top: 72upx;left: 0;
      	border-radius: 16upx;
      	z-index: 999;
      	padding: 40upx 46upx;
      	box-sizing: border-box;
      }
      .popup_box_content>image{
      	width: 388upx;
      	height: 386upx;
      	margin: 24upx auto 0;
      	margin-left: 40upx;
      }
</style>
